<template>
  <!--  图片列表-->
  <a-list
    style="width: calc(100% - 20px)"
    :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5, xxxl: 5 }"
    class="picture-list"
    item-layout="horizontal"
    :data-source="props.pictureList"
  >
    <template #renderItem="{ item }">
      <a-list-item class="picture-list-item">

        <a-card  style="width: 200px;height: 310px">
          <template #cover>
            <a-image
              style="
              height: 200px;
              background-size: cover;
              object-fit: cover;
                "
              :width="200"
              :src="item.url"
              referrerpolicy="no-referrer"
              fallback=""
              :alt="item.title"
            />
          </template>
          <a-card-meta :title="item.title">
            <template #description >
              <div class="description" >
                {{ item.title }}
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { toRefs, withDefaults, defineProps } from "vue";
import logo1 from "@/assets/logo1.jpg";


interface Prpos {
  pictureList: any[];
}

// console.log(p);
const props = withDefaults(defineProps<Prpos>(), {
  pictureList: () => [],
});



// console.log(props.pictureList);
</script>

<style scoped lang="less">
.picture-list {
  align-items: center;
  //background-color: #42b983;
  .picture-list-item {
    display: inline-block;
    margin-right: 2px;
    margin-left: 2px;
    .description{

      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
  }
}
</style>